<template>
    <div>
        <div class="couponSearch">
            <label for="">
                <input
                    @keypress="searchGoods"
                    type="serch"
                    v-model="search"
                    placeholder="输入搜索关键词"
                >
                <img
                    @click="searchInput"
                    src="../../asset/icon/icon_coupon_search.png"
                >
            </label>
        </div>
        <scroller
            :on-refresh="refresh"
            :on-infinite="infinite"
            ref="infinite"
            style="padding-top:35px"
        >
            <div class="cont">
                <router-link
                    :to="{path:'/couponCont',query:{coupon_id: item.id}}"
                    v-for="(item, index) in listSource"
                    :key="index"
                    class="list"
                    :style=" index === 0 ? 'margin-top:0px' : '' "
                >
                    <div>
                        <img :src="item.images">
                    </div>
                    <div>
                        <p>{{item.title}}</p>
                        <div>
                            <div>
                                <span>￥{{item.fee}}</span>
                                <span>
                                    <span>￥</span>
                                    <span>{{item.o_price}}</span>
                                </span>
                            </div>
                            <div :class="item.return_money_msg =='立即购买'?'hotShop':'hotMoney'">
                                {{item.return_money_msg}}
                            </div>
                        </div>
                    </div>
                </router-link>
            </div>
        </scroller>
    </div>
</template>
<script>
export default {
    name: "couponSearch",
    data() {
        return {
            page: 1,
            limit: 10,
            noData: true,
            iscur: 0,//选择 索引
            search: this.$route.query.search,//搜索内容
            listSource: [],
        };
    },
    methods: {
        searchGoods(event) {
            if (event.keyCode == 13) { //如果按的是enter键 13是enter 
                event.preventDefault(); //禁止默认事件（默认是换行） 
                this.refresh()
            }
        },
        searchInput() {
            this.refresh()
        },

        infinite() {
            this.listData();
        },
        refresh() {
            this.page = 1;
            this.listData(true);
        },
        listData(type) {
            let params = {
                page: this.page,
                limit: this.limit,
                key: this.search,
            };
            this.$post("/coupon/get_list", params)
                .then(res => {
                    if (res.code === 20000) {
                        this.page++;
                        if (type) {
                            this.listSource = res.data.list;
                            setTimeout(() => {
                                this.$refs.infinite.finishPullToRefresh();
                            }, 500);
                        } else {
                            for (let i in res.data.list) {
                                let newData = res.data.list[i];
                                this.listSource.push(newData);
                            }
                            if (res.data.list.length < this.limit) {
                                this.noData = false;
                                this.$refs.infinite.finishInfinite(true);
                            } else {
                                this.$refs.infinite.finishInfinite();
                            }
                        }
                    }
                })
                .catch(err => { });
        },
    },
    beforeCreate() {
        document.querySelector("body").setAttribute("style", "background-color:#f0effe");
    },
    created() {
        // 实例创建完成
        // this.searchData();
    },
};
</script>
<style lang="less" scoped>
@import url("../../asset/css/coupon");
</style>